<!--
 * @Author: 码上talk|RC
 * @Date: 2021-09-19 10:12:51
 * @LastEditTime: 2022-02-14 15:24:02
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-distributor/subpackage/member/pages/account/nickname/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <div class="nickname">
    <view class="form">
      <view class="f-item">
        <a-input placeholder="请输入新昵称" clearable trim v-model="form.nickname">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe603;</icon>
          </template>
        </a-input>
        <view class="i-tip">10个以内字符或汉字。</view>
      </view>
    </view>
    <view class="change-btn" :class=" isConfirm ? 'active' :'' " @tap="handleChange">确定修改</view>
  </div>
</template>

<script>
  import {
    mapActions
  } from 'vuex';
  import {
    model
  } from '@/model';
  const {
    Member
  } = model.collection;
  export default {
    data() {
      return {
        form: {
          nickname: ''
        }
      }
    },
    computed: {
      isConfirm() {
        if (this.form.nickname) {
          return true
        }
        return false
      }
    },
    methods: {
      ...mapActions('user', ['getUserInfo']),
      handleChange() {
        if (!this.form.nickname) return this.toast('请输入新昵称')
        Member.sendApi('updateSingleField', {
          params: {
            type: 5
          },
          data: {
            value: this.form.nickname,
          }
        }).then((res) => {
          if (res.status) {
            uni.startPullDownRefresh()
            this.getUserInfo().then(() => {
              this.toast('昵称修改成功', 2000, 'success')
              uni.stopPullDownRefresh()
            })
            setTimeout(() => {
              uni.stopPullDownRefresh()
              this.back()
            }, 2100)
          } else {
            this.toast(res.message || '修改失败，请重新修改')
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .nickname {
    width: 100vw;
    display: flex;
    justify-content: center;

    .form {
      width: 680rpx;
      padding: 0 20rpx;

      .f-item {
        width: 680rpx;
        height: 90rpx;
        border-bottom: 1rpx solid #ccc;

        .icon-prefix {
          width: 60rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          color: #999;
        }

        .i-tip {
          margin-top: 20rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #DB197C;
        }
      }

    }

    .change-btn {
      position: fixed;
      bottom: 60rpx;
      width: 680rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      color: #fff;
      border-radius: 10rpx;
      background-color: #e96fba;
    }

    .active {
      background-color: #dc187f;
    }
  }
</style>